<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="./fonts//demo.css"> -->
  <link rel="stylesheet" href="/admin/fonts/iconfont.css">
  <link rel="stylesheet" href="/admin/lib/layui/css/layui.css" />
  <style>
    .space_slide {
      margin: 10px 20px 30px 20px;
    }
  </style>
</head>

<body>

  <!-- <i class="iconfont icon-jiantou"></i> -->
  <div class="layui-card space_slide">
    <div class="layui-card-header">
      <span class="layui-breadcrumb">
        <a href="https://5aebf8b605931.t73.qifeiye.com/">首页</a>
        <a href="">首页管理</a>
        <!-- <a href="">轮播图管理</a> -->
        <a><cite>文章管理</cite></a>
      </span>
    </div>
    <div class="layui-card-body">
      <table class="layui-table " lay-even lay-skin="row " lay-size="	lg ">
        <colgroup>
          <col width="20">
          <col width="20">
          <col width="215">
          <col width="60">

          <col>
          <col width="180">
          <!--         <colgroup>
          <col width="20">
          <col width="20">
          <col width="150">
          <col width="60">
          <col>
          <col width="215">
        </colgroup> -->
        </colgroup>
        <thead>
          <tr>
            <th>id</th>
            <th>图片</th>
            <th>名称</th>
            <th>排序</th>
            <th>介绍</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td><img src="/admin/images/文章管理1.webp" alt=""></td>
            <td>设计行业也有相貌歧视？</td>
            <td>1</td>
            <td>“年会设计图，客户要求背景色是灰色、字是黄色”
              “为什么？”设计师问道，
            </td>
            <td>
              <button type="button" class="layui-btn layui-btn-xs ">查看</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-warm">修改</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
            </td>
          </tr>
          <tr>
            <td>2</td>
            <td><img src="/admin/images/文章管理2.webp" alt=""></td>
            <td>给大象转个身</td>
            <td>2</td>
            <td>客户：先谢谢你了，能想象一下一块圆形的黑金属在一点钟方向向着八点钟的位子以闪电的弧度裂开然后黑金属两瓣分...
            </td>
            <td>
              <button type="button" class="layui-btn layui-btn-xs ">查看</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-warm">修改</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
            </td>
          </tr>
          <tr>
            <td>3</td>
            <td><img src="/admin/images/文章管理3.webp" alt=""></td>
            <td>论PS和PhotoShop的区别</td>
            <td>3</td>
            <td>有一次，快递员给我打电话让我去楼下取件，我于是便质问他：“不是备注留言写了工作日才送公司嘛，今天周六你给...。
            </td>
            <td>
              <button type="button" class="layui-btn layui-btn-xs ">查看</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-warm">修改</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
            </td>
          </tr>
          <tr>
            <td>4</td>
            <td><img src="/admin/images/文章管理4.webp" alt=""></td>
            <td>设计师的歌单</td>
            <td>4</td>
            <td>设计师必备歌单：
              ①周杰伦《不能说的秘密》
              ②陈奕迅《好久不见》
            </td>
            <td>
              <button type="button" class="layui-btn layui-btn-xs ">查看</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-warm">修改</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>

</html>
<script src="/admin/lib/layui/layui.js"></script>

<script>
  //注意：导航 依赖 element 模块，否则无法进行功能性操作
  //JS
  layui.use(['element', 'layer', 'util'], function () {
    var element = layui.element,
      layer = layui.layer,
      util = layui.util,
      $ = layui.$;

    //头部事件
    util.event('lay-header-event', {
      //左侧菜单事件
      menuLeft: function (othis) {
        layer.msg('展开左侧菜单的操作', {
          icon: 0
        });
      },
      menuRight: function () {
        layer.open({
          type: 1,
          content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
          area: ['260px', '100%'],
          offset: 'rt', //右上角
          anim: 5,
          shadeClose: true,
        });
      },
    });
  });
</script>